<template>
  <div class="wrap">
    <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 500" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
      <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="5%" stop-color="#002bdc88"></stop>
          <stop offset="95%" stop-color="#32ded488"></stop>
        </linearGradient>
      </defs>
      <path
        d="M 0,500 C 0,500 0,166 0,166 C 48.142952275249726,133.13286471821434 96.28590455049945,100.26572943642866 152,111 C 207.71409544950055,121.73427056357134 270.99933407325193,176.06994697249968 319,203 C 367.00066592674807,229.93005302750032 399.7167591564928,229.4544826735726 461,201 C 522.2832408435072,172.5455173264274 612.1336293007769,116.11212233321001 668,121 C 723.8663706992231,125.88787766678999 745.7487236403995,192.09702799358737 786,218 C 826.2512763596005,243.90297200641263 884.8714761376248,229.4997656924405 946,220 C 1007.1285238623752,210.5002343075595 1070.765371809101,205.90390923665063 1126,205 C 1181.234628190899,204.09609076334937 1228.067036625971,206.88459736095697 1279,201 C 1329.932963374029,195.11540263904303 1384.9664816870145,180.55770131952153 1440,166 C 1440,166 1440,500 1440,500 Z"
        stroke="none"
        stroke-width="0"
        fill="url(#gradient)"
        class="transition-all duration-300 ease-in-out delay-150 path-0"
      ></path>
      <defs>
        <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="5%" stop-color="#002bdcff"></stop>
          <stop offset="95%" stop-color="#32ded4ff"></stop>
        </linearGradient>
      </defs>
      <path
        d="M 0,500 C 0,500 0,333 0,333 C 48.46294240966826,333.1513380194845 96.92588481933652,333.302676038969 147,346 C 197.07411518066348,358.697323961031 248.75940313232218,383.94063386360835 300,376 C 351.2405968676778,368.05936613639165 402.0365026513749,326.9347885065976 465,303 C 527.9634973486251,279.0652114934024 603.0945862621778,272.3202121100013 655,283 C 706.9054137378222,293.6797878899987 735.5851522999135,321.7843630533974 782,326 C 828.4148477000865,330.2156369466026 892.5648045381674,310.542335676409 952,317 C 1011.4351954618326,323.457664323591 1066.1556295474168,356.04629424096686 1127,349 C 1187.8443704525832,341.95370575903314 1254.8126772721666,295.27248735972375 1308,286 C 1361.1873227278334,276.72751264027625 1400.5936613639167,304.8637563201381 1440,333 C 1440,333 1440,500 1440,500 Z"
        stroke="none"
        stroke-width="0"
        fill="url(#gradient)"
        class="transition-all duration-300 ease-in-out delay-150 path-1"
      ></path>
    </svg>
    <div class="box">
      <OrderInfo v-for="item in renderOrders.records" :key="item._id" :data="item" @del="del" @confirm="confirm"></OrderInfo>
      <h1 v-if="renderOrders.records.length === 0">暂无订单信息哦</h1>
      <div class="pagination">
        <ul>
          <li class="pre" @click="pre" :class="{ disabled: curpage === 1 }">&lt;</li>
          <li class="page" v-for="item in renderOrders.display" :key="item" :class="{ active: curpage === item }" @click="curpage = item">{{ item }}</li>
          <li class="next" :class="{ disabled: curpage === renderOrders.pages }" @click="next">&gt;</li>
        </ul>
      </div>
    </div>
    <div class="show circle">
      <button @click="getAllOrders(1)">全部订单</button>
    </div>
    <div class="choose circle">
      <button @click="myAcceptOrders(1)">我接的单</button>
    </div>
    <div class="circle home">
      <a href="/home">首页</a>
    </div>
  </div>
</template>

<script>
import OrderInfo from '@/components/base/orderInfo.vue'
import { getOrder } from '@/api/index.js'
export default {
  components: {
    OrderInfo
  },
  data() {
    return {
      renderOrders: {},
      curpage: 1,
      totalpage: 1,
      stateRec: true,
      stateDel: false
    }
  },
  methods: {
    async getAllOrders(page) {
      this.stateRec = true
      this.stateDel = false
      this.curpage = page
      const id = JSON.parse(localStorage.getItem('accessToken')).data
      const { data } = await getOrder('/api/home/alldeliveryorder', { id, page })
      this.renderOrders = data
    },
    async myAcceptOrders(page) {
      this.stateRec = true
      this.stateDel = false
      const deliveryId = JSON.parse(localStorage.getItem('accessToken')).data
      const { data } = await getOrder('/api/home/myacceptorder', { deliveryId, page })
      this.renderOrders = data
    },
    pre() {
      if (this.curpage !== 1) {
        --this.curpage
      }
    },
    next() {
      if (this.curpage !== this.renderOrders.pages) {
        ++this.curpage
      }
    },
    del() {
      this.getAllOrders(this.page)
    },
    confirm() {
      this.myAcceptOrders(this.curpage)
    }
  },
  created() {
    this.getAllOrders(1)
  },
  watch: {
    curpage() {
      if (this.stateRec === true) {
        this.getAllOrders(this.curpage)
      } else {
        this.myAcceptOrders(this.curpage)
      }
    }
  }
}
</script>

<style lang="less" scoped src="@/assets/css/selectOrder.less"></style>
<style scoped></style>
